<#include "/able/_inc/_head.html"/>
<#include "/able/_inc/_layout.html"/>

<!DOCTYPE HTML>
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html lang="${lang}">

<head>
    <@head />
    <link rel="stylesheet" href="/vendor/switchery/switchery.css">
    <link rel="stylesheet" href="/assets/css/wx-article.css" >
</head>
<body>
<@layout>
<div class="wrap-content" id="container">
<!-- start: PAGE TITLE -->
<section id="page-title" >
    <div class="row">
        <div class="col-sm-8">
            <a href="${ctx_admin}/category" class="btn btn-o btn-primary" style="border-radius: 50px;padding: 5px 8px"><i class="fa fa-reply"></i></a>
            <label>文本信息 - 公众号管理</label>
        </div>

    </div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: BASIC TABLE -->

<div class="container-fluid container-fullw bg-white">

    <div class="row">
        <div class="col-md-12">
            <!--<h5 class="over-title margin-bottom-15">Basic <span class="text-bold">Table</span></h5>-->
            <!--<p>-->
            <!--For basic styling&mdash;light padding and only horizontal dividers&mdash;add the base class <code>.table</code> to any <code>&lt;table&gt;</code>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.-->
            <!--</p>-->
            <div class="alert alert-info">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <div><i class="fa fa-question-circle"></i>操作提示</div>
                <ul>
                    <li>标识“<em>*</em>”的选项为必填项，其余为选填项。</li>
                    <li>上传图片时请注意图片尺寸问题。</li>
                </ul>
            </div>

            <div class="col-md-12">

                <form action="${ctx_admin}<#if model?exists>/wx-article/update<#else>/wx-article/add</#if>" method="post" role="form" id="form" novalidate="novalidate">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="errorHandler alert alert-danger no-display">
                                <i class="fa fa-times-sign"></i> You have some form errors. Please check below.
                            </div>
                            <div class="successHandler alert alert-success no-display">
                                <i class="fa fa-ok"></i> Your form validation is successful!
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="template" style="background: transparent;">
                                <div class="content">
                                    <div class="content-item content-default active" data-index="1">
                                        <img src="/assets/images/default.png" alt="">
                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="col-md-8">
                            <div class="form-group">
                                <label class="control-label">
                                    标题 <span class="symbol required" aria-required="true"></span>
                                </label>
                                <input type="text" placeholder="标题" class="form-control" id="title" name="title">
                            </div>

                            <div class="form-group">
                                <label class="control-label">
                                    作者 <span class="symbol required" aria-required="true"></span>
                                </label>
                                <input type="text" placeholder="作者" class="form-control" id="author" name="author">
                            </div>

                            <div class="form-group">
                                <label class="control-label">
                                    类型 <span class="symbol required" aria-required="true"></span>
                                </label>
                                <select id="msgtype" name="msgtype" class="form-control">
                                    <option value="news">图文消息</option>
                                    <#--<option value="image">图片</option>-->
                                    <option value="voice">语音</option>
                                    <option value="video">视频</option>
                                    <#--<option value="thumb">和缩略图</option>-->
                                </select>
                                <input id="media" name="media" type="hidden">
                                <input name="thumbMedia" id="thumbMedia" type="hidden">
                            </div>

                            <div class="form-group">
                                <label class=" control-label" for="fileupload">
                                    封面图：<span class="symbol required" aria-required="true"></span>
                                </label>
                                <div class="" style="display: inline-block">
                                    <span class="btn btn-primary fileinput-button">
                                    <i class="fa fa-cloud-upload"></i>
                                    <span>封面图</span>
                                    <input id="fileupload" type="file" name="file" multiple>
                                    </span>
                                </div>

                                <div id="upload_media_box" style="visibility:hidden;display: inline-block;margin-left: 10px">
                                <label class=" control-label" for="upload_media">
                                    媒体文件：<span class="symbol required" aria-required="true"></span>
                                </label>
                                <div class="" style="display: inline-block">
                                    <span class="btn btn-primary fileinput-button">
                                    <i class="fa fa-cloud-upload"></i>
                                    <span>媒体文件</span>
                                    <input id="upload_media" type="file" name="file" multiple>
                                    </span>
                                </div>
                                </div>
                            </div>

                            <div class="form-group">

                            </div>

                            <div class="form-group">
                                <label class="control-label">
                                    原文链接 <span class="symbol required" aria-required="true"></span>
                                </label>
                                <input type="text" placeholder="原文链接" class="form-control" id="contentSourceUrl" name="contentSourceUrl">
                            </div>

                            <div class="form-group">
                                <label class="control-label">
                                    留言 <span class="symbol required" aria-required="true"></span>
                                </label>
                                <div class="checkbox-inline">
                                    <input name="needOpenComment" type="checkbox" class="js-switch" checked  value="1"/>
                                </div>
                                <div class="comment-type radio clip-radio radio-primary radio-inline">
                                    <input type="radio" value="0" name="onlyFansCanComment" id="onlyFansCanComment_0">
                                    <label for="onlyFansCanComment_0">
                                        所有人可留言
                                    </label>

                                </div>
                                <div class="comment-type radio clip-radio radio-primary radio-inline">
                                    <input type="radio" value="1" name="onlyFansCanComment" id="onlyFansCanComment_1">
                                    <label for="onlyFansCanComment_1">
                                        仅粉丝可留言
                                    </label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label">
                                    描述 <span class="symbol required" aria-required="true"></span>
                                </label>
                                <input type="text" placeholder="描述" class="form-control" id="digest" name="digest">

                            </div>

                            <div class="form-group">
                                <label class="control-label">
                                    <!--Ckeditor <span class="symbol required"></span>-->
                                </label>
                                <script id="editor" type="text/plain"></script>
                                <!--<textarea  class="editor form-control" id="editor2" name="editor2" cols="10" rows="10"></textarea>-->
                            </div>


                            <div class="form-group">
                                <hr>
                                <label class="control-label">
                                </label>
                                <button class="btn btn-primary">提交</button>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
</@layout>
    <script type="text/javascript" src="/vendor/switchery/switchery.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"></script>

<script type="text/javascript">
    var elem = document.querySelector('.js-switch');
    var switchery = new Switchery(elem);
    var ue = UE.getEditor('editor');

    elem.onchange = function () {
        if(elem.checked){
            $(".comment-type").show();
        }else{
            $(".comment-type").hide();
        }
    };



    var FormValidator = function () {
        "use strict";
        // function to initiate Validation Sample 2
        var runValidator2 = function () {
            var form2 = $('#form');
            var errorHandler2 = $('.errorHandler', form2);
            var successHandler2 = $('.successHandler', form2);

            form2.validate({
                errorElement: "span", // contain the error msg in a small tag
                errorClass: 'help-block',
                errorPlacement: function (error, element) {
                },
                ignore: "",
                rules: {

                },
                messages: {

                },
                invalidHandler: function (event, validator) { //display error alert on form submit
                    successHandler2.hide();
                    errorHandler2.show();
                },
                highlight: function (element) {
                    $(element).closest('.help-block').removeClass('valid');
                    // display OK icon
                    $(element).closest('.form-group').removeClass('has-success').addClass('has-error').find('.symbol').removeClass('ok').addClass('required');
                    // add the Bootstrap error class to the control group
                },
                unhighlight: function (element) { // revert the change done by hightlight
                    $(element).closest('.form-group').removeClass('has-error');
                    // set error class to the control group
                },
                success: function (label, element) {
                    label.addClass('help-block valid');
                    // mark the current input as valid and display OK icon
                    $(element).closest('.form-group').removeClass('has-error').addClass('has-success').find('.symbol').removeClass('required').addClass('ok');
                },
                submitHandler: function (form) {
                    successHandler2.show();
                    errorHandler2.hide();

                    var data=$(form).serializeJSON();
                    data.content = ue.getContent();

                    $.ajax({
                        type: form.method,
                        url:form.action,
                        async:false, //同步方法，如果用异步的话，flag永远为1
                        dataType:'json',
                        data:data,
                        success: function(res){
                            if (res.success) {
                                layer.msg(res.message, {
                                    icon: 1,
                                    time: 2000 ///2秒关闭（如果不配置，默认是3秒）
                                }, function () {
                                    location.href = global.adminPath + "/wx-article";
                                });
                            } else {
                                layer.msg(res.message, {icon: 2});
                            }
                        }
                    });
                }
            });

        };
        return {
            //main function to initiate template pages
            init: function () {
                runValidator2();
            }
        };
    }();



    jQuery(document).ready(function() {
        FormValidator.init();

        $('#msgtype').change(function () {
           if($(this).val()=='voice'||$(this).val()=='video') {
               $('#upload_media_box').css("visibility","initial");
           }else{
               $('#upload_media_box').css("visibility","hidden");
           }
        });

        $('#fileupload').fileupload({
            inputid: 'fileupload',//我要实例化哪个标签
            url: 'upload/wx_article',//服务端的地址
            dataType: 'json',//数据格式，ajax你懂的
            autoUpload: true,//是否选了文件就直接自动上传
            maxNumberOfFiles: 1,//最多同时上传几个文件
            maxFileSize: 209715200,
            acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
            //maxChunkSize:10000,//最大接收文件大小
            done: function (e, data) {//上传完了干嘛
                var res = data.result;

                if (res.success) {
                    $('#thumbMedia').val(res.url);
                    $('.content-item img').attr('src', res.url);
                    layer.msg(res.message, {icon: 1});
                }else{
                    layer.msg(res.message, {icon: 2});
                }
            },
            processfail:function(e,data){
                var currentFile = data.files[data.index];
                if (data.files.error && currentFile.error) {
                    layer.msg(currentFile.error, {icon: 2});
                }
            }
        });

        $('#upload_media').fileupload({
            inputid: 'upload_media',//我要实例化哪个标签
            url: 'upload/wx_article',//服务端的地址
            dataType: 'json',//数据格式，ajax你懂的
            autoUpload: true,//是否选了文件就直接自动上传
            maxNumberOfFiles: 1,//最多同时上传几个文件
            maxFileSize: 209715200,
            acceptFileTypes: /(\.|\/)(mp4|m4a|mp3|flv)$/i,
            //maxChunkSize:10000,//最大接收文件大小
            done: function (e, data) {//上传完了干嘛
                var res = data.result;
                layer.msg(res.message);
                if (res.success) {
                    $('#media').val(res.url);
                    layer.msg(res.message, {icon: 1});
                }else{
                    layer.msg(res.message, {icon: 2});
                }
            },
            progressall: function (e, data) {
                debugger
            },
            processalways:function (e, data) {
                debugger
            },
            processfail:function(e,data){
                var currentFile = data.files[data.index];
                if (data.files.error && currentFile.error) {
                    layer.msg(currentFile.error, {icon: 2});
                }
            },
            fail:function (e,data) {
                debugger
            }
        });
    });

</script>